import clsx from "clsx";

interface IButton
  extends React.DetailedHTMLProps<
    React.ButtonHTMLAttributes<HTMLButtonElement>,
    HTMLButtonElement
  > {
  children: React.ReactNode;
}

export const Button: React.FC<IButton> = ({ children, className, ...nest }) => {
  return (
    <button
      {...nest}
      className={clsx(
        "py-2 px-4 md:text-lg font-bold",
        "cursor-pointer hover:bg-green-700 text-white",
        "hover:text-white shadow",
        "bg-green-600 hover:shadow-md rounded-lg",
        "hover:scale-105 transition",
        nest.disabled && "disabled:cursor-not-allowed disabled:bg-[#607d8b]",
        className
      )}
    >
      {children}
    </button>
  );
};
